<template>
  <div style="height: 100%; width: 100%">
    <div style="height: 100%; width: 100%" ref="echartsCanvas"></div>
  </div>
</template>

<script>
export default {
  name: "echartsCanvas",
  data() {
    return {};
  },
  props: {
    echartsObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    echartsObj: {
      handler: function (val, oldVal) {
        if (JSON.stringify(val) != JSON.stringify(oldVal)) {
          this.init(val);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init(val) {
      var myChart = this.$echarts.init(this.$refs.echartsCanvas);
      let option = {
        xAxis: {
          type: "category",
          // boundaryGap: true,
          axisLabel: {
            interval: 0,
            // rotate:40 ,
          },
          data: val.xdata,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b} <br /> {a0}: {c0}",
        },
        yAxis: [
          {
            type: "value",
            // min: (minData-(minData+maxData1)%2)*2.2,
            // // max: 100,
            // interval: 50,
            splitLine: { show: false }, //去除网格线
            axisLabel: {
              formatter: "{value} %",
              show: false,
            },
            splitArea: {
              show: false,
              // areaStyle: {
              //   color: "#fff",
              // },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          },
          {
            type: "value",
            // min: 0,
            splitLine: { show: false }, //去除网格线
            // max: maxData*2,
            // // interval: 50,
            axisLabel: {
              formatter: "{value} %",
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: "收入趋势",
            data: val.barData,
            barWidth: 20,
            color: ["#0070c0"],
            itemStyle: {
              normal: {
                // color: function (params) {
                //   var c = "";
                //   var index = val.xAxis.indexOf("浙江");
                //   if (params.dataIndex != index) {
                //     c = "#0070c0";
                //   } else {
                //     c = "#c00000";
                //   }
                //   return c;
                // },
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#0070c0",
                  },
                  // formatter: "{c}%",
                },
              },
            },
          },
        ],
      };

      myChart.setOption(option);
      setTimeout(function () {
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }, 500);
    },
  },
};
</script>

<style>
</style>
